<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 03</title>

<!-- Tangle -->
<script type="text/javascript" src="../Tangle/Tangle.js"></script>

<!-- TangleKit (optional) -->
<link rel="stylesheet" href="../Tangle/TangleKit/TangleKit.css" type="text/css">
<script type="text/javascript" src="../Tangle/TangleKit/mootools.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/sprintf.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/BVTouchable.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/TangleKit.js"></script>

<!-- example 03 canvas -->
<script type="text/javascript" src="./ex03_bezier.js"></script>
</head>

<body onload="setUpTangle();">

<p>Example 03.</p>

<h1>Bezier curves explained (Hopefully) using Tangle.js and HTML 5 Canvas</h1>
<p>First draft: more satisfactory explanation is to come.</p>
<div>
  <canvas id="canvas" width="500" height="530">Oops!  You need a browser
  that can support the canvas element to view this demo.</canvas>
</div>
<div id="formulas">
  <strong>Points</strong>
  <table>
   <thead>
    <tr>
     <th>Start(0)</th><th>1st Handle(1)</th><th>2nd Handle(2)</th><th>End(3)</th>
    </tr>
   </thead>
   <tbody>
   <tr>
    <td>[<span class="TKAdjustableNumber" data-var="p0x" data-min="0" data-max="490"></span>, <span class="TKAdjustableNumber" data-var="p0y" data-min="0" data-max="490"></span>]</td>
    <td>[<span class="TKAdjustableNumber" data-var="p1x" data-min="0" data-max="490"></span>, <span class="TKAdjustableNumber" data-var="p1y" data-min="0" data-max="490"></span>]</td>
    <td>[<span class="TKAdjustableNumber" data-var="p2x" data-min="0" data-max="490"></span>, <span class="TKAdjustableNumber" data-var="p2y" data-min="0" data-max="490"></span>]</td>
    <td>[<span class="TKAdjustableNumber" data-var="p3x" data-min="0" data-max="490"></span>, <span class="TKAdjustableNumber" data-var="p3y" data-min="0" data-max="490"></span>]</td>
   </tr>
   </tbody>
</table>

</body>
</html>
